<template>
   <div class="update_gender">
      <!-- 单列选择时，可以通过 default-index 属性设置初始选中项的索引。 -->
      <!-- change 事件 拿到它的 索引 -->
      <van-picker
         title="修改性别"
         show-toolbar
         :columns="columns"
         @confirm="onConfirm"
         @cancel="$emit('close')"
         @change="onPickChange"
         :default-index="value"
      />
   </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
export default {
   name: 'Update_gender',
   props: {
      value: {
         type: Number,
         required: true
      }
   },
   data() {
      return {
         columns: ['男', '女'],
         localGender: this.value
      }
   },
   methods: {
      async onConfirm() {
         this.$toast.loading({
            message: '保存中...',
            forbidClick: true,
            // 持续展示
            duration: 0
         })
         try {
            // const localGender = this.localGender
            await updateUserProfile({
               gender: this.localGender
            })
            // console.log(data)
            // 更新视图
            this.$emit('input', this.localGender)
            // 关闭弹层
            this.$emit('close')
            this.$toast.success('更新成功')
         } catch (err) {
            this.$toast.fail('修改失败')
         }
      },
      onPickChange(picker, value, index) {
         this.localGender = index
      }
   }
}
</script>

<style lang="less" scoped></style>
